// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, ImageBackground, TouchableOpacity, Image, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { Actions } from 'react-native-router-flux';
import LinearGradient from 'react-native-linear-gradient';
import * as ActionTypes from '../../constants/constants.js'

// antd 按需加载
import { Tabs, Toast, WhiteSpace } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getUserInfo, dashboard } from './module/module.js';
import { goodsNew } from '../Home/module/module.js';

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, Merchants, ImportantTitle, VipCard, Title, RnFlatList, RnImage, Good } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, removeData, isLogin, logout } from '../../util/utils.js'

class User extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      allChecked: false,
    }
    this.getUserInfo = getUserInfo.bind(this)
    this.dashboard = dashboard.bind(this)
    this.goodsNew = goodsNew.bind(this)
  }

  componentDidMount() {
    const { user, goodsNew: { nextPage, pageSize } } = this.props

    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    // });
    if (isLogin()) {
      console.log('进入了')
      this.getUserInfo()
      this.dashboard()
    } else {
      this.goodsNew({
        pageNum: nextPage,
        pageSize
      })
    }
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { goodsNew: { pageSize } } = this.props
    this.goodsNew({
      pageNum: 1,
      pageSize,
      refresh: true
    }).then(res => {
      this.setState({ refreshing: false });
    })
  }

  onEndReached = () => {
    console.log('到底了')
    const { user, goodsNew: { nextPage, pageSize, list, total } } = this.props
    if (list.length < total) {
      this.goodsNew({
        pageNum: nextPage,
        pageSize
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }


  renderContent() {
    const { refreshing } = this.state
    const { userInfo, userDashboard, goodsNew } = this.props
    if (isLogin()) {
      return (
        <View>
          <LinearGradient
            colors={['#eb3c3c', '#ff7459']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            style={{
              height: 200,
              flexDirection: 'column',
            }}
          >
            <View style={{
              padding: 15,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
              <TouchableOpacity
                style={{}}
                onPress={() => {
                  alert(1)
                }}
              >
                {/* <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-scan.png')} /> */}
              </TouchableOpacity>
            </View>
            <TouchableOpacity
              onPress={() => {
                Actions.userInfo()
              }}
              style={{
                marginTop: 20,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <View style={{
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              }}>

                {userInfo.icon ?
                  <RnImage resizeMode='cover' style={{ width: 70, height: 70, marginBottom: 15, borderRadius: 35, backgroundColor: '#fff' }} uri={data.pic} />
                  :
                  <Image resizeMode='cover' style={{ width: 70, height: 70, marginBottom: 15, borderRadius: 35, backgroundColor: '#fff' }} source={require('../../static/images/user-bg.png')} />}

                <Text style={{ fontSize: 20, color: '#fff', lineHeight: 22, }}>{userInfo.nickname ? userInfo.nickname : userInfo.mobile}</Text>
              </View>
            </TouchableOpacity>
          </LinearGradient>
          <ScrollView style={{
            padding: 15,
            marginTop: -40,
          }}>
            <View style={{
              backgroundColor: '#fff',
              borderRadius: 10,
              paddingLeft: 15,
              marginBottom: 15
            }}>
              <TouchableOpacity
                style={{
                  borderBottomColor: '#f7f7f7',
                  borderBottomWidth: .5,
                  paddingVertical: 12,
                  paddingRight: 15,
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                }}
                onPress={() => {
                  Actions.orderList()
                }}
              >
                <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, }}>我的订单</Text>
                <View style={{
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                  <View style={{ marginLeft: 5 }}><Icon name="ios-arrow-forward" size={18} color="#7b7b7b" /></View>
                </View>
              </TouchableOpacity>
              <View style={{
                paddingVertical: 12,
                paddingRight: 15,
              }}>
                <View style={{
                  flexDirection: 'row',
                }}>
                  <TouchableOpacity>
                    <View style={{
                      width: (ScreenWidth - 60) / 4,
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>

                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>{userDashboard.unpaid ? userDashboard.unpaid : 0}</Text>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>待付款</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity>
                    <View style={{
                      width: (ScreenWidth - 60) / 4,
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>{userDashboard.unfilled ? userDashboard.unfilled : 0}</Text>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>待发货</Text>
                    </View>
                  </TouchableOpacity>
                  {/* <TouchableOpacity>
                    <View style={{
                      width: size(110),
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>{userDashboard.undelivery ? userDashboard.undelivery : 0}</Text>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>已完成</Text>
                    </View>
                  </TouchableOpacity> */}
                  {/* <TouchableOpacity>
                    <View style={{
                      width: size(110),
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>{userDashboard.refunds ? userDashboard.refunds : 0}</Text>
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>退货退款</Text>
                    </View>
                  </TouchableOpacity> */}
                </View>
              </View>
            </View>
            <View style={{
              backgroundColor: '#fff',
              borderRadius: 10,
              paddingLeft: 15,
              marginBottom: 15
            }}>
              <View style={{
                borderBottomColor: '#f7f7f7',
                borderBottomWidth: .5,
                paddingVertical: 12,
                paddingRight: 15,
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
                <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, }}>个人中心</Text>
                <View style={{
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                  {/* <View style={{ marginLeft: 5 }}><Icon name="ios-arrow-forward" size={18} color="#7b7b7b" /></View> */}
                </View>
              </View>
              <View style={{
                paddingVertical: 12,
                paddingRight: 15,
              }}>
                <View style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                }}>
                  <TouchableOpacity
                    onPress={() => {
                      Actions.address()
                    }}
                  >
                    <View style={{
                      width: size(110),
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>
                      <Icon name="md-pin" size={28} color="#2f2f2f" />
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>收货地址</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      Actions.headset()
                    }}
                  >
                    <View style={{
                      width: size(110),
                      flexDirection: 'column',
                      alignItems: 'center',
                      marginBottom: 10
                    }}>
                      <Icon name="md-headset" size={28} color="#2f2f2f" />
                      <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>联系客服</Text>
                    </View>
                  </TouchableOpacity>
                  <View style={{
                    width: size(110),
                    flexDirection: 'column',
                    alignItems: 'center',
                    marginBottom: 10
                  }}>
                  </View>
                  <View style={{
                    width: size(110),
                    flexDirection: 'column',
                    alignItems: 'center',
                    marginBottom: 10
                  }}>
                  </View>
                </View>
              </View>
            </View>
            {/* <View style={{
            backgroundColor: '#fff',
            borderRadius: 10,
            paddingLeft: 15,
            marginBottom: 15
          }}>
            <View style={{
              borderBottomColor: '#f7f7f7',
              borderBottomWidth: .5,
              paddingVertical: 12,
              paddingRight: 15,
              alignItems: 'center',
              flexDirection: 'row',
            }}>
              <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, flex: 1 }}>绑定手机</Text>
              <View style={{
                alignItems: 'center',
                flexDirection: 'row',
              }}>
                <Text style={{ fontSize: 14, color: '#0077ff', lineHeight: 18 }}>未绑定</Text>
                <View style={{ marginLeft: 5 }}><Icon name="ios-arrow-forward" size={18} color="#7b7b7b" /></View>
              </View>
            </View>
            <View style={{
              borderBottomColor: '#f7f7f7',
              borderBottomWidth: .5,
              paddingVertical: 12,
              paddingRight: 15,
              alignItems: 'center',
              flexDirection: 'row',
            }}>
              <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, flex: 1 }}>绑定微信</Text>
              <View style={{
                alignItems: 'center',
                flexDirection: 'row',
              }}>
                <Text style={{ fontSize: 14, color: '#cccccc', lineHeight: 18 }}>{}</Text>
              </View>
            </View>
            <View style={{
              borderBottomColor: '#f7f7f7',
              borderBottomWidth: .5,
              paddingVertical: 12,
              paddingRight: 15,
              alignItems: 'center',
              flexDirection: 'row',
            }}>
              <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, flex: 1 }}>联系客服</Text>
              <View style={{
                alignItems: 'center',
                flexDirection: 'row',
              }}>
                <Text style={{ fontSize: 14, color: '#0077ff', lineHeight: 18 }}>400-1245-586</Text>
                <View style={{ marginLeft: 5 }}><Icon name="ios-arrow-forward" size={18} color="#7b7b7b" /></View>
              </View>
            </View>
            <View style={{
              borderBottomColor: '#f7f7f7',
              borderBottomWidth: .5,
              paddingVertical: 12,
              paddingRight: 15,
              alignItems: 'center',
              flexDirection: 'row',
            }}>
              <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, flex: 1 }}>清空缓存</Text>
              <View style={{
                alignItems: 'center',
                flexDirection: 'row',
              }}>
                <Text style={{ fontSize: 14, color: '#cccccc', lineHeight: 18 }}>5.46M</Text>
              </View>
            </View>
            <View style={{
              borderBottomColor: '#f7f7f7',
              borderBottomWidth: .5,
              paddingVertical: 12,
              paddingRight: 15,
              alignItems: 'center',
              flexDirection: 'row',
            }}>
              <Text style={{ fontSize: 16, color: '#2f2f2f', lineHeight: 18, flex: 1 }}>关于我们</Text>
              <View style={{
                alignItems: 'center',
                flexDirection: 'row',
              }}>
                <View style={{ marginLeft: 5 }}><Icon name="ios-arrow-forward" size={18} color="#7b7b7b" /></View>
              </View>
            </View>
          </View> */}
            <TouchableOpacity
              style={{
                paddingVertical: 14,
                paddingHorizontal: 20,
                backgroundColor: '#f23030',
                borderRadius: 23,
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 15
              }}
              onPress={() => logout(true)}
            >
              <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>退出登录</Text>
            </TouchableOpacity>
            <View style={{ height: 15 }} />
          </ScrollView>
        </View>
      )
    } else {
      return (

        <RnFlatList
          style={{
          }}
          columnWrapperStyle={{
            backgroundColor: '#f0f2f5',
            paddingLeft: 3,
            paddingRight: 3,
            paddingTop: 3,
          }}
          // onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          datas={goodsNew}
          ListHeaderComponent={
            <View style={{}}>
              <View style={{
              }}>
                <LinearGradient
                  colors={['#eb3c3c', '#ff7459']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 0 }}
                  style={{
                    height: 200,
                    flexDirection: 'column',
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      Actions.login()
                    }}
                    style={{
                      marginTop: 50,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <View style={{
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                      <Image resizeMode='cover' style={{ width: 70, height: 70, marginBottom: 15, borderRadius: 35, backgroundColor: '#fff' }} />
                      <Text style={{ fontSize: 20, color: '#fff', lineHeight: 22, }}>登录/注册></Text>
                    </View>
                  </TouchableOpacity>
                </LinearGradient>
                <View style={{
                  padding: 15,
                  marginTop: -40,
                  paddingBottom:0
                }}>
                  <View style={{
                    backgroundColor: '#fff',
                    borderRadius: 10,
                    paddingLeft: 15,
                  }}>
                    <View style={{
                      paddingVertical: 12,
                      paddingRight: 15,
                    }}>
                      <View style={{
                        flexDirection: 'row',
                      }}>
                        <TouchableOpacity>
                          <View style={{
                            width: (ScreenWidth - 60) / 4,
                            flexDirection: 'column',
                            alignItems: 'center',
                            marginBottom: 10
                          }}>

                            <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>0</Text>
                            <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>待付款</Text>
                          </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                          <View style={{
                            width: (ScreenWidth - 60) / 4,
                            flexDirection: 'column',
                            alignItems: 'center',
                            marginBottom: 10
                          }}>
                            <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>0</Text>
                            <Text style={{ fontSize: 13, color: '#000000', lineHeight: 15, marginTop: 8 }}>待发货</Text>
                          </View>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                  <View style={{ height: 15 }} />
                </View>
              </View>
              <Title
                title="新品上市"
                subTitle="New products listed"
              />
              <WhiteSpace />
            </View>
          }
          renderItem={({ item }) => <Good type="good" data={item} />}
        />

      )
    }
  }

  render() {
    const { userInfo } = this.props
    return (
      <View style={Style.container}>
        <Status />
        {this.renderContent()}
      </View >
    );
  }
}



export default connect(({ goodsNew, userInfo, userDashboard }) => ({
  goodsNew, userInfo, userDashboard
}))(pureRender(User))


